<template>
  <p>列表及分页</p>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="account" label="用户名" />
    <el-table-column prop="createTime" label="注册时间" />
    <el-table-column prop="level" label="等级" />
  </el-table>
  <el-pagination v-model:currentPage="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange"></el-pagination>
</template>

<script>
const data = Array.from(Array(114), (v, i) => {
  return {
    account: "uaa" + (i + 1),
    createTime: new Date(Date.now() + Math.ceil(Math.random() * 1000)),
    level: Math.ceil(Math.random() * 10)
  }
})

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0
    }
  },
  methods: {
    getData(page, pageSize) {
      this.tableData = data.slice((page - 1) * pageSize, page * pageSize);
      this.total = data.length;
    },
    handleSizeChange(val) {
      console.log('handleSizeChange', val);
      this.getData(this.currentPage, val)
    },
    handleCurrentChange(val) {
      console.log('handleCurrentChange', val);
      this.getData(val, this.pageSize)
    }
  },
  created() {
    this.getData(1, this.pageSize)
  }
}
</script>